<template>
  <div>
     <Wrap>
       <div slot="main_wrap">
         <div class="form-inline form-find ng-pristine ng-valid">
            <div class="form-group">
								<label>项目名称：</label>
						</div>
						<div class="form-group" style="min-width:200px">
              <!-- <avue-input-tree v-model="form2" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree> -->
              <el-select class="form-control " v-model="form2" :popper-append-to-body="false">
                  <el-option value="0" label="广东省税务局"><span>广东省税务局</span></el-option>
                </el-select>
            </div>
            <div class="form-group">
              <label>查询类型：</label>
              <div class="form-group-control">
                <el-select v-model="params.queryType" class="form-control select-type" :popper-append-to-body="false" placeholder="请选择查询类型">
                  <el-option value="1" label="按分类"><span>按分类</span></el-option>
                  <el-option value="2" label="按分项"><span>按分项</span></el-option>
                </el-select>
                <el-select v-model="params.typeVal" class="form-control select-type" :popper-append-to-body="false" v-if="params.queryType == 1">
                  <el-option v-for="item in optionsLx"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="params.typeVal" class="form-control select-type" :popper-append-to-body="false" v-if="params.queryType == 2">
                  <el-option v-for="item in optionsFx"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                  <!-- <el-option value="1" label="电">电</el-option>
                  <el-option value="2" label="水">水</el-option> -->
                  <!-- <el-option value="3" label="集中供热量">集中供热量</el-option>
                  <el-option value="4" label="集中供冷量">集中供冷量</el-option> -->
                </el-select>
                <!-- <el-select v-model="select4" class="form-control select-type" :popper-append-to-body="false" v-if="select2 === '2'" multiple>
                  <el-option value="1" label="照明插座用电">照明插座用电</el-option>
                  <el-option value="2" label="空调用电">空调用电</el-option>
                  <el-option value="3" label="动力用电">动力用电</el-option>
                  <el-option value="4" label="特殊用电">特殊用电</el-option>
                </el-select> -->
              </div>
            </div>
            <!-- <div class="form-group" v-if="select2 === '4' || select2 === '3'">
              <label>用能仪表：</label>
              <div class="form-group-control">
                 <avue-input-tree v-model="select6" placeholder="请选择内容" :append-to-body="false" type="tree" :dic="dic"></avue-input-tree>
              </div>
            </div>
            <div class="form-group" v-if="select2 === '5'">
              <label>光伏电站：</label>
              <div class="form-group-control">
                <el-select v-model="select7" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="东区空调机房设备用电">东区空调机房设备用电</el-option>
                  <el-option value="2" label="西区空调机房设备用电">西区空调机房设备用电</el-option>
                </el-select>
              </div>
            </div> -->
             <div class="form-group">
              <label>起始年份：</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.startDate"
                    value-format="yyyy"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
             <div class="form-group">
              <label>结束年份：</label>
              <div class="form-group-control">
                 <el-date-picker
                    v-model="params.endDate"
                    value-format="yyyy"
                    :type="typedate">
                  </el-date-picker>
              </div>
            </div>
             <!-- <div class="form-group">
              <label>用能时段：</label>
              <div class="form-group-control">
                <el-select v-model="select9" class="form-control select-type" :popper-append-to-body="false">
                  <el-option value="1" label="全部时段">全部时段</el-option>
                  <el-option value="2" label="夜间能耗趋势">夜间能耗趋势</el-option>
                  <el-option value="3" label="节假日能耗趋势">节假日能耗趋势</el-option>
                  <el-option value="4" label="午休能耗趋势">午休能耗趋势</el-option>
                  <el-option value="5" label="白天能耗趋势">白天能耗趋势</el-option>
                  <el-option value="6" label="工作时段趋势">工作时段趋势</el-option>
                </el-select>
              </div>
            </div> -->
            <div class="form-group">
              <a class="btn btn-primary btn-sm" role="button" @click="getData">查询</a>
              <a class="btn btn-sm btn-primary" role="button" @click="goUrl" access-field="goTable">能耗数据分析</a>
              <!-- <a class="btn btn-sm btn-primary" role="button" ng-click="toHourlyEnergy()" access-field="goHourlyenergytrend">导出</a> -->
            </div>
         </div>
         <div class="compare-content">
          <div id="bar" class="chart-border">
              <v-chart :options="chartParams1" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                  
          </div>
          <div class="chart-border-right chart-border">
              <v-chart :options="chartParams2" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                    
          </div>
          <table class="table table-striped table-bordered table-hover half-table">
            <thead>
              <tr>
                  <th class="ng-binding"></th>
                  <th class="ng-binding" v-for="item in annually">{{item.date}}</th>
                  <!-- <th class="ng-binding">{{annually && annually[0] && annually[0].date}}</th>
                  <th class="ng-binding">{{annually && annually[1] && annually[1].date}}</th> -->
              </tr>
            </thead>
            <tbody>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">总体用能({{unit}})</td>
                  <td class="ng-binding" width="150" v-for="item in annually">{{item.data.toFixed(2)}}</td>
                  <!-- <td class="ng-binding" width="150">{{annually && annually[0] && annually[0].data}}</td>
                  <td class="ng-binding" width="150">{{annually && annually[1] && annually[1].data}}</td> -->
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">环比变化)</td>
                  <td class="ng-binding" width="150" v-for="item in annually">{{item.qoq ? item.qoq.toFixed(2)  + '%' : ''}}</td>
                  <!-- <td class="ng-binding" width="150">{{annually && annually[0] && annually[0].qoq}}%</td>
                  <td class="ng-binding" width="150">{{annually && annually[1] && annually[1].qoq}}%</td> -->
              </tr>
            </tbody> 
          </table>
          <table class="table table-striped table-bordered table-hover half-table">
            <thead>
              <tr>
                  <th class="ng-binding"></th>
                  <th class="ng-binding" v-for="item in quarterly">{{item.date}}</th>
              </tr>
            </thead>
            <tbody>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">{{startYear}}年({{unit}})</td>
                  <td class="ng-binding" width="150" v-for="item in quarterly">{{item.startData ? item.startData.toFixed(2) : '-'}}</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">{{endYear}}年({{unit}})</td>
                  <td class="ng-binding" width="150" v-for="item in quarterly">{{item.endData ? item.endData.toFixed(2) : '-'}}</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">同比变化</td>
                  <td class="ng-binding" width="150" v-for="item in quarterly">{{item.yoy ? item.yoy.toFixed(2) + '%': '-'}}</td>
              </tr>
            </tbody> 
          </table>
          <div style="clear: both"></div>
          <div class="chart-border chart-line">
              <v-chart :options="chartParams3" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />                    
          </div>
           <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                  <th class="ng-binding"></th>
                  <th class="ng-binding" v-for="item in monthly">{{item.date}}</th>
              </tr>
            </thead>
            <tbody>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">{{startYear}}年({{unit}})</td>
                  <td class="ng-binding" width="150" v-for="item in monthly">{{item.startData ? item.startData.toFixed(2) : '-'}}</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">{{endYear}}年({{unit}})</td>
                  <td class="ng-binding" width="150" v-for="item in monthly">{{item.endData ? item.endData.toFixed(2) : '-'}}</td>
              </tr>
              <tr  class="ng-scope">
                  <td class="ng-binding" width="150">同比变化</td>
                  <td class="ng-binding" width="150" v-for="item in monthly">{{item.yoy ? item.yoy.toFixed(2) + '%': '-'}}</td>
              </tr>
            </tbody> 
          </table>
         </div>
       </div>
     </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import { remote } from "@/api/admin/dict";
import { energyConsumption } from '@/api/energy/energy'
const option1 = {
  color: ['#588dd5', '#639871'],
  legend: {
      data: ['总体用能',  '环比变化'],
      textStyle: {
        color: '#fff'
      },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
      {
          type: 'category',
          data: [],
          axisPointer: {
              type: 'shadow'
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show:false
          },
          axisLabel: {
            show: true,
            color: '#fff'
          },
      }
  ],
  yAxis: [
      {
          type: 'value',
          name: '总体用能逐年趋势',
          // min: 0,
          // max: 250,
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:true,
            lineStyle: {
              color: '#0c324a'
            }
          },
          // interval: 50
      },
      {
          type: 'value',
          name: '',
          // min: 0,
          // max: 25,
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:false
          },
          // interval: 20
      }
  ],
  series: [
      {
          name: '总体用能',
          type: 'bar',
          data: []
      },
      {
          name: '环比变化',
          type: 'line',
          yAxisIndex: 1,
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          data: []
      }
  ]
}
const option2 = {
  color: ['#588dd5', '#639871', '#c05050'],
  legend: {
      data: [],
      textStyle: {
        color: '#fff'
      },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
      {
          type: 'category',
          data: [],
          axisPointer: {
              type: 'shadow'
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show:false
          },
          axisLabel: {
            show: true,
            color: '#fff'
          },
      }
  ],
  yAxis: [
      {
          type: 'value',
          name: '',
          // min: 0,
          // max: 250,
          nameTextStyle: {
            color: '#fff',
            align: 'left'
          },
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:true,
            lineStyle: {
              color: '#0c324a'
            }
          },
          // interval: 20
      },
      {
          type: 'value',
          name: '',
          // min: 0,
          // max: 25,
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}%'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:false
          },
          // interval: 20
      }
  ],
  series: [
      {
          name: '',
          type: 'bar',
          data: []
      },
      {
          name: '',
          type: 'bar',
          data: []
      },
      {
          name: '同比变化',
          type: 'line',
          yAxisIndex: 1,
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          data: []
      }
  ]
}
const option3 = {
  color: ['#588dd5', '#639871', '#c05050'],
  legend: {
      data: [],
      textStyle: {
        color: '#fff'
      },
  },
  grid: {
    left: 80,
    right: 80,
    bottom: 40,
    top: 60
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
      {
          type: 'category',
          data: [],
          axisPointer: {
              type: 'shadow'
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show:false
          },
          axisLabel: {
            show: true,
            color: '#fff'
          },
      }
  ],
  yAxis: [
      {
          type: 'value',
          // name: '2021,2022年逐月总体用能同比趋势图',
          name: '',
          // min: 0,
          // max: 250,
          nameTextStyle: {
            color: '#fff',
            align: 'left'
          },
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:true,
            lineStyle: {
              color: '#0c324a'
            }
          },
          // interval: 10
      },
      {
          type: 'value',
          name: '',
          // min: 0,
          // max: 25,
          axisLine: {
            show: true,
            lineStyle:{
              color: '#008acd',
              width: 2
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}%'
          },
          axisTick: {
            show:false
          },
          splitLine: {
            show:false
          },
          // interval: 10
      }
  ],
  series: [
      {
          name: '',
          type: 'bar',
          data: []
      },
      {
          name: '',
          type: 'bar',
          data: []
      },
      {
          name: '同比变化',
          type: 'line',
          yAxisIndex: 1,
          symbolSize: 6,
          lineStyle: {
            width: 3
          },
          data: []
      }
  ]
}
export default {
  components: {
    Wrap
  },
  data () {
    return {
      optionsLx: [],
      optionsFx: [],
      form2:'0',
      unit: '',
      annually: [],
      monthly: [],
      quarterly: [],
      typedate: 'year',
      dataList: [
        [
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          }
        ],
        [
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '2022-03-05 00:00:00',
            count: '93.7000',
          },
          {
            date: '总计',
            count: '93151561.7000',
          }
        ]
      ],
      chartParams1: {},
      chartParams2: {},
      chartParams3: {},
      active: true,
      data1: '',
      data2: '',
      select2: '1',
      select1: '1',
      select3: '',
      select4: '',
      select5: '',
      select6: '',
      select7: '',
      select8: '',
      select9: '',
      startYear: '',
      endYear: '',
      params: {
        startDate: String(new Date().getFullYear() - 1),
        endDate: String(new Date().getFullYear()),
        queryType: '1',
        typeVal: '1'
      },
      dic:[{
          label:'广东省税务局',
          value:0,
          // children:[{
          //    label:'选项3',
          //    value:2
          // },{
          //    label:'选项4',
          //    value:3
          // }]
        // },{
        //   label:'选项2',
        //   value:1
        }]
    }
  },
  created() {
    remote('energy_trend_type').then(response => {
        this.optionsLx = response.data.data
    })
    remote('energy_device_type').then(response => {
        this.optionsFx = response.data.data
    })
    this.getData()
  },
  methods: {
    getData() {
        if (this.params.startDate && this.params.endDate) {
            if (Math.abs(Number(this.params.endDate) - Number(this.params.startDate)) > 4) {
              this.$message.warning('开始年份跟结束年份不能相差四年')
              return
            }
        }
       energyConsumption(this.params).then(res => {
         this.unit = res.data.data.unit
         this.annually = res.data.data.annually
         this.quarterly = res.data.data.quarterly
         this.monthly = res.data.data.monthly
         this.startYear = res.data.data.startYear
         this.endYear = res.data.data.endYear
         option1.xAxis[0].data = res.data.data.annually.map(item => {
           return item.date
         })

         option1.series[0].data = res.data.data.annually.map(item => {
           return item.data
         })
         option1.series[1].data = res.data.data.annually.map(item => {
           return item.qoq
         })
         this.chartParams1 = Object.assign({}, option1)

         option2.legend.data = []
         option2.legend.data.push(res.data.data.startYear + '年', res.data.data.endYear + '年', '同比变化')
          option2.xAxis[0].data = res.data.data.quarterly.map(item => {
           return item.date
         })
         option2.series[0].name = res.data.data.startYear + '年'
         option2.series[0].data = res.data.data.quarterly.map(item => {
           return item.startData
         })
         option2.series[1].name = res.data.data.endYear + '年'
         option2.series[1].data = res.data.data.quarterly.map(item => {
           return item.endData
         })
         option2.series[2].data = res.data.data.quarterly.map(item => {
           return item.yoy
         })
         option2.yAxis[0].name = res.data.data.startYear + ',' + res.data.data.endYear + '逐季总体用能同比趋势图'
         this.chartParams2 = Object.assign({}, option2)

        option3.legend.data = []
         option3.legend.data.push(res.data.data.startYear + '年', res.data.data.endYear + '年', '同比变化')
          option3.xAxis[0].data = res.data.data.monthly.map(item => {
           return item.date
         })
         option3.series[0].name = res.data.data.startYear + '年'
         option3.series[0].data = res.data.data.monthly.map(item => {
           return item.startData
         })
         option3.series[1].name = res.data.data.endYear + '年'
         option3.series[1].data = res.data.data.monthly.map(item => {
           return item.endData
         })
         option3.series[2].data = res.data.data.monthly.map(item => {
           return item.yoy
         })
         option3.yAxis[0].name = res.data.data.startYear + ',' + res.data.data.endYear + '年逐月总体用能同比趋势图'
         this.chartParams3 = Object.assign({}, option3)
       })
    },
    goUrl() {
      this.$router.push({
        path: '/energy/carbonEgy/analyze'
      })
    },
    changeDateType(value) {
      if (value == '1' || value == '2') {
        this.typedate = 'date'
      } else if(value == '3') {
        this.typedate = 'month'
      } else if(value == '4') {
        this.typedate = 'year'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.half-table{
  width: 49.5%;
  float: left;
  &:nth-child(3) {
    margin-right: 1%;
  }
  
}
.compare-content{
  #bar{
    height: 360px;
    width: 49.5%;
    float: left;
    margin-right: 1%;
    margin-bottom: 10px;
  }
  .chart-border-right{
    width: 49.5%;
    float: left;
    height: 360px;
    margin-bottom: 10px;
  }
}
.chart-line{
  height: 360px;
  margin-bottom: 10px;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border: 1px solid rgb(10, 57, 98);
}
.form-find {
    padding: 20px;
    background-color: #081325;
    box-shadow: inset 0px 1px 13px 0px #1AABF3;
    border: solid 1px rgba(15, 80, 111, 0.55);
    margin-bottom: 10px;
   .form-group {
        margin-right: 3px;
        margin-bottom: 3px;
    }
}
.reading-row {
    line-height: 25px;
    margin-right: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid #0a91ef;
    overflow: hidden;
    .el-icon-circle-check {
      color: green;
    }
    .icon {
        font-size: 23px;
        vertical-align: middle;
    }
}
.outline-border {
    border: 1px solid #ddd;
    color:#fff;
    padding: 5px;
    .total-count {
        color: #0371F7;
        text-decoration: underline;
        font-weight: bold;
    }
    .abnormal-rate {
        color: red;
        font-weight: bold;
    }
}
.list-content{
  height: 475px;
  overflow-y: auto;
  margin-top: 10px;
  .device-reading {
    float: left;
  }
}
.form-inline label {
    margin-right: 7px;
}
.form-group-control {
    display: inline-block;
    vertical-align: middle;
}
.nav-tabs {
    margin-bottom: 15px;
    &>li.active,&>li:hover {
      background-color: transparent;
    }
}
@media (min-width: 768px){
  .form-inline .form-group {
      display: inline-block;
      vertical-align: middle;
  }
}
</style>
